<style scoped lang="scss">
.uploadpdfdialog {
  .el-dialog__headerbtn {
    font-size: 30px !important;
  }
}
</style>
<style lang="scss">
.uploadpdfdialog {
  .el-dialog__headerbtn {
    font-size: 30px !important;
  }
}
</style>
<template>
  <div class="uploadpdf">
    <div @click="seePdf"><em style="text-decoration: underline;color:rgba(7, 191, 251, 1);cursor: pointer;">{{file.filename}}</em></div>
    <el-dialog :title="title" center :visible.sync="dialogVisible" width="80%" @opened="dialogOpened" @closed="dialogClosed" custom-class="uploadpdfdialog" :close-on-click-modal="false">
      <pdf v-loading="loadingPdf" v-for="i in numPages" :key="i" :src="pdfSrc" :page="i" @loaded="loadPdf" @page-loaded="loadPage" style="display: inline-block; width: 100%;padding: 10px;"></pdf>
      <span slot="footer" class="dialog-footer fxcc" style="margin-top:30px;">
        <el-button type="primary" plain size="medium"><a :href="url" :download="title" style="color:#409EFF;font-weight:600;">下 载</a></el-button>
        <el-button @click="cancelDialog" type="primary" plain size="medium">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";
import pdf from "vue-pdf";
export default {
  data() {
    return {
      title: "",
      pdfSrc: undefined,
      loadingPdf: true,
      numPages: 1,
      totalPages: 0,
      dialogVisible: false
    };
  },
  props: {
    file: "",
    url: ""
  },
  mounted() {
    this.init();
  },
  components: { pdf },
  methods: {
    init() {
      this.title = this.file.filename.replace(".pdf", "");
    },
    seePdf() {
      this.dialogVisible = true;
      this.loadingPdf = true;
      this.pdfSrc = pdf.createLoadingTask({
        url: this.url,
        CMapReaderFactory
      });
      this.pdfSrc
        .then(pdf => {
          this.totalPages = pdf.numPages;
          this.numPages = this.totalPages;
        })
        .catch(err => {
          this.$error("文件打开失败！");
          this.dialogVisible = false;
          console.error(err);
        });
    },
    morePdf() {
      if (this.numPages + 3 <= this.totalPages) {
        this.numPages = this.numPages + 3;
      } else {
        this.numPages = this.totalPages;
      }
    },
    loadPdf() {
      //console.log("PDF is loaded");
    },
    loadPage(pageNumber) {
      if (pageNumber == this.totalPages) {
        this.loadingPdf = false;
      }
    },
    nextPage() {
      if (this.numPages < this.totalPages) {
        this.numPages = this.numPages + 1;
      }
    },
    dialogOpened() {},
    dialogClosed() {},
    cancelDialog() {
      this.dialogVisible = false;
    },
    confirmDialog() {}
  }
};
</script>

